<template>
	<view class="app">
		<view class="main">
			<button style="background-color: #E60012;" class="mini-btn" type="primary"
				@click="goSetting">新增定时控制</button>
			<view class="container">

				<view @click="goSetting" v-for="(item, index) in scheduleList" :key="index" class="schedule-item">
					<view class="title">
						<view class="titleh2">{{ grepTitle(item.status) }}</view>
						<button class="del" style="background-color: #E60012;" type="primary"
							@click.stop="removeSchedule(item)">删除</button>
					</view>
					<view class="details" style="display: flex;">
						<view class="titleh3">周期：</view>
						<text>{{ item.weekday?item.weekday:'单次' }}</text>
					</view>
					<view class="details" style="display: flex;">
						<view class="titleh3">时间：</view>
						<text>{{ item.time }}</text>
					</view>
					<view class="details" style="display: flex;">
						<view class="titleh3">线路：</view>
						<text>{{ item.channel}}</text>
					</view>

				</view>
			</view>
		</view>

	</view>
	<uni-popup ref="alertDelDialog" type="dialog">
		<uni-popup-dialog :type="info" cancelText="取消" confirmText="确定" title="提示" content="是否确定删除？"
			@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
	</uni-popup>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onHide
	} from "@dcloudio/uni-app"
	import {
		getTimerConfig,
		delTimerConfig
	} from "@/api/wuLian.js"
	const options = ref()
	const alertDelDialog = ref(null)
	onLoad((option) => {
		options.value = option
		// getList()
	})
	let inv = null
	onShow(() => {
		getList()
		inv = setInterval(() => {
			getList()
		}, 5000)
	})

	onHide(() => {
		clearInterval(inv)
		inv = null
	})

	function getList() {
		getTimerConfig(options.value.mac).then(e => {
			console.log(e.data, 57)
			scheduleList.value = e.data
		})
	}
	// true/false/closeAndLock/unlockAndOpentrue/false/closeAndLock/unlockAndOpen，分别表示合闸/分闸/分闸锁定/解锁合闸
	function grepTitle(val) {
		if (val === 'true' || val === '开') {
			return "合闸"
		} else if (val === 'false' || val === '关') {
			return "分闸"
		} else if (val === 'closeAndLock') {
			return "分闸锁定"
		} else if (val === 'unlockAndOpen') {
			return "解锁合闸 "
		}
	}
	const scheduleList = ref([]);
	const curronItem = ref()

	function removeSchedule(item) {
		uni.showModal({
			title: '提示',
			content: '是否确定删除？',
			success: function(res) {
				if (res.confirm) {
					delTimerConfig({
						mac: options.value.mac,
						autoid: item.id
					}).then(e => {
						uni.showToast({
							title: e.msg,
							duration: 2000
						});
						getList()
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
		// return 
		// curronItem.value = item
		// alertDelDialog.value.open();
		// return


	}

	function dialogConfirm() {
		const item = curronItem.value

	}

	function goSetting() {
		uni.navigateTo({
			url: `/wuLian/pages/DingShi/setting?mac=` + options.value.mac
		})
	}
</script>

<style lang="less">
	.titleh2 {
		font-size: 32rpx;
		font-weight: bold;
	}

	.titleh3 {
		font-size: 28rpx;
		font-weight: bold;
	}

	.head {
		width: 100%;
		height: 30%;
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;

	}

	.main {
		flex: 1;
		overflow: auto;
		display: flex;
		flex-direction: column;
	}

	.container {
		padding: 10px;
		overflow: auto;
		flex: 1;
	}

	.app {
		// width: 100%;
		height: 100%;
		padding: 10rpx;
		display: flex;
		flex-direction: column;
	}

	.mini-btn {
		margin: 20rpx;
		padding: 3rpx;
		font-size: 28rpx;
		margin-top: 25rpx;
	}


	button {
		margin-top: 10px;
		background: #E60012;
	}

	.del {
		background-color: transparent;
		border: none;
		padding: 0px 45rpx 0px 45rpx;
		margin: 0;
		box-shadow: none;
		outline: none;
		border: none;
		content: none;
		font-size: 25rpx;

	}

	///


	.schedule-item {
		// border: 1px solid #ccc;
		border-radius: 5px;
		margin-bottom: 10px;
		padding: 10px;
		line-height: 60rpx;
		box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.643137254901961);

	}

	.title {
		font-weight: bold;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.details {
		margin-bottom: 5px;
	}
</style>